<template>
    <div class="app-container">
      <div class="app-content-container">
        <grid-table ref="gridTable"
                    name="AutoPos"
                    ref-form="searchForm"
                    :table-id="4"
                    :query="query"
                    :loading.sync="loading"
                    :data="tableData"
                    :perfect="false"
                    :buttons="buttons"
                    :columns="columns"
                    :slot-column="slotColumns"
                    @remote-method="getList">
          <template v-slot:form>
            <el-form :inline="true" ref="searchForm" v-model="query" size="small">
              <el-form-item label="门店" prop="store">
                <el-select v-model="query.store" placeholder="请选择" clearable>
                  <el-option key="440106" label="广州文立方店" value="440106"/>
                  <el-option key="460201" label="三亚夏日百货店" value="460201"/>
                </el-select>
              </el-form-item>
              <el-form-item label="订单号" prop="orderTranId">
                <el-input v-model="query.orderTranId" placeholder="请输入订单号" clearable/>
              </el-form-item>
              <el-form-item label="下单时间" prop="createDate">
                <date-picker v-model="query.saleDateTime"/>
              </el-form-item>
            </el-form>
          </template>
        </grid-table>
      </div>
    </div>
</template>

<script>
  import GridTable from '@/components/GridTable/index'
  import { listPos, syncOrder } from '@/api/o2o/pos'
  import DatePicker from '@/components/DatePicker'

  export default {
    name: 'Pos',
    components: { GridTable, DatePicker },
    data() {
      return {
        loading: false,
        currentRow: null,
        tableData: [],
        buttons: [
          { type: 'search' },
        ],
        query: {
          pageSize: 20,
          pageNum: 1,
          total: 0,
          store: null,
          orderTranId: null,
          saleDateTime: []
        },
        columns: [
          { title: '操作', align: 'center', width: 120,
            slots: {
              default: ({ row }) => {
                return [
                  <vxe-button type='text' nativeOnClick={ () => { this.syncOrder(row) } }>同步</vxe-button>,
                ]
              }
            }
          }
        ],
        slotColumns: {
          status: {
            default: ({ row }) => {
              return [
                <el-tag type={row.status == 0 ? 'info' : row.status == 2 ? 'danger' : 'success'} class="tag-item" effect="dark">{ row.status == 0 ? '未上传' : row.status == 1 ? '上传成功' : '上传失败' }</el-tag>
              ]
            }
          }
        }
      }
    },
    created() {
      this.getList()
      request.$bus.$on('closeLoading',() =>{
        console.log('here')
        this.loading = false
      })
    },
    methods: {
      syncOrder(row) {
        console.log(row)
        if (row.status == 0) {
          syncOrder(row.id).then(res => {
            this.notifySuccess('同步成功')
            this.getList()
          }).catch(res => {
            this.msgError(res.msg)
          })
        }
      },
      getList() {
        this.loading = true
        let data = Object.assign({}, this.query)
        listPos(data).then(res => {
          this.tableData = res.rows
          this.query.total = res.total
          this.loading = false
        }).catch(_ => {
          this.loading = false
        })
      }
    }
  }
</script>

<style scoped>

</style>
